<template>
  <div id="printCallRecords" ref="callBosMain">
    <div class="title">
      <span class="line"></span>
      <span><i style="" class="iconfont icon-tonghuajilu"></i> {{$t('wechat.tonghuajilu')}}({{  total==0?0:total}})</span>
    <el-button style="float:right;margin-left:10px;margin-right:10px;margin-top:6px;color:#fff;" type="text" @click="openPrintModel"><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button>
    </div>
    <a-input-search v-show="showInfo" :placeholder="$t('wechat.phoneSearch')" v-model="searchWord1" style="width: 100%;margin-bottom:10px;width: 95%;margin: 0 auto;display: block;" @search="onSearchFirst" />

    <transition name="el-zoom-in-center">
    <div class="mainContentBox" ref="callrem" v-show="showInfo" @scroll="throttleFn">
        <div class="callRecordListItem" @click="openCallDetails(item)" v-for="(item,index) in tableData" :key="index">
          <div style="margin-right:10px;">
            <img v-if="item.issend==0" width="30" height="30" src="../../../../assets/jieting.png" alt="">
            <img v-else width="30" height="30" src="../../../../assets/boda.png" alt="">

            <!-- <svg v-if="item.issend!==0" width="30" height="30" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.3755 9.79423C15.1021 9.79423 15.7715 10.1883 16.1241 10.8235L18.5706 15.2303C18.8909 15.8073 18.9059 16.5052 18.6108 17.0955L16.254 21.8092C16.254 21.8092 16.937 25.3206 19.7954 28.179C22.6538 31.0374 26.1535 31.7086 26.1535 31.7086L30.8664 29.3522C31.4571 29.0568 32.1555 29.0721 32.7327 29.393L37.152 31.85C37.7866 32.2029 38.1802 32.8719 38.1802 33.598L38.1802 38.6715C38.1802 41.2552 35.7803 43.1213 33.3322 42.2952C28.3043 40.5987 20.4996 37.3685 15.5528 32.4216C10.6059 27.4748 7.3757 19.6701 5.67916 14.6422C4.85314 12.1941 6.71923 9.79423 9.30287 9.79423L14.3755 9.79423Z" fill="#b3b3b0" stroke="#b3b3b0" stroke-width="2" stroke-linejoin="round"/><path d="M35 6L43 14L35 22" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M27 14.0083H43" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg> -->
            <!-- <svg v-else width="30" height="30" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.3755 9.79423C14.1021 9.79423 14.7715 10.1883 15.1241 10.8235L17.5706 15.2303C17.8909 15.8073 17.9059 16.5052 17.6108 17.0955L15.254 21.8092C15.254 21.8092 15.937 25.3206 18.7954 28.179C21.6538 31.0374 25.1535 31.7086 25.1535 31.7086L29.8664 29.3522C30.4571 29.0568 31.1555 29.0721 31.7327 29.393L36.152 31.85C36.7866 32.2029 37.1802 32.8719 37.1802 33.598L37.1802 38.6715C37.1802 41.2552 34.7803 43.1213 32.3322 42.2952C27.3043 40.5987 19.4996 37.3685 14.5528 32.4216C9.60592 27.4748 6.3757 19.6701 4.67916 14.6422C3.85314 12.1941 5.71923 9.79423 8.30287 9.79423L13.3755 9.79423Z" fill="#b3b3b0" stroke="#b3b3b0" stroke-width="2" stroke-linejoin="round"/><path d="M34.2402 6L26.2402 14L34.2402 22" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M42.2402 14.0083H26.2402" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg> -->
            <!-- <svg v-else width="30"  height="30" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.3755 9.79423C15.1021 9.79423 15.7715 10.1883 16.1241 10.8235L18.5706 15.2303C18.8909 15.8073 18.9059 16.5052 18.6108 17.0955L16.254 21.8092C16.254 21.8092 16.937 25.3206 19.7954 28.179C22.6538 31.0374 26.1535 31.7086 26.1535 31.7086L30.8664 29.3522C31.4571 29.0568 32.1555 29.0721 32.7327 29.393L37.152 31.85C37.7866 32.2029 38.1802 32.8719 38.1802 33.598L38.1802 38.6715C38.1802 41.2552 35.7803 43.1213 33.3322 42.2952C28.3043 40.5987 20.4996 37.3685 15.5528 32.4216C10.6059 27.4748 7.3757 19.6701 5.67916 14.6422C4.85314 12.1941 6.71923 9.79423 9.30287 9.79423L14.3755 9.79423Z" fill="none" stroke="#2c89d5" stroke-width="4" stroke-linejoin="round"/><path d="M35 6L43 14L35 22" stroke="#2c89d5" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M27 14.0083H43" stroke="#2c89d5" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg> -->
          </div>
          <div style="width:250px;">
            <h4 style="font-weight: bold;margin-bottom: 0;color:red;" v-if="item.recover == 1">{{ item.name+' '+item.phone }}(已删除)</h4>
            <h4 style="font-weight: bold;margin-bottom: 0;" v-if="item.recover !== 1">{{ item.name+' '+item.phone }}</h4>
            <div>{{ formateTime(item.calltime)+ ' 时长：'+item.duration+'秒' }}</div>
          </div>
          <div>
            <svg width="44" height="44" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="24" r="3" fill="#b3b3b0"/><circle cx="24" cy="24" r="3" fill="#b3b3b0"/><circle cx="36" cy="24" r="3" fill="#b3b3b0"/></svg>
          </div>
          <div style="position: absolute;right:0px;bottom:0px;">
           <div class="badgeBox" v-if="item.cntRemark>0">{{$t('wechat.remarked')}}</div>
            <el-button type="text" v-else @click.stop="markOrder(item)" size="mini" style="margin-right:20px;" icon="el-icon-edit">{{$t('wechat.biaoji')}}</el-button>
          </div>
          <el-button v-if="printShow" style="position: absolute;top: 0px;right: 19px;" @click.prevent.stop="addPrint(item,$event)" type="text">添加</el-button>
        </div>
        <div>
        </div>
      <div class="loadingBoxbottom" v-if="showLoading" style="color:#2196f3"><i :class="loadClass" style="color:#2196f3"></i> {{ loadingText }}</div>
      <a-affix :offset-bottom="50">
        <el-button type="primary" style="" @click="printJson" v-if="printShow">{{$t('wechat.startDaYin')}}</el-button>
        <el-button style="" @click="closePrintFunction" v-if="printShow">{{$t('wechat.close')}}</el-button>
       </a-affix>
    </div>
  </transition>
    <div class="mainContentBox" v-if="!showInfo">
      <div class="blackCall" @click="blackList()">
        <svg width="30" height="30" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M31 36L19 24L31 12" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg>返回
      </div>
      <div style="width: 70px;margin: 0 auto;margin-bottom:10px;">
        <img src="../../../../assets/bgPhone/smsuser.png" width="70" height="70" alt="">
      </div>
      <div style="text-align: center;font-weight: bold;font-size: 14px;">{{ itemData.phone }}</div>
      <div style="text-align: center;font-size: 14px;">{{ itemData.name }}</div>
      <div class="callInfoB">
        <svg style="margin-right:10px;" v-if="itemData.issend==0" width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.3755 9.79423C15.1021 9.79423 15.7715 10.1883 16.1241 10.8235L18.5706 15.2303C18.8909 15.8073 18.9059 16.5052 18.6108 17.0955L16.254 21.8092C16.254 21.8092 16.937 25.3206 19.7954 28.179C22.6538 31.0374 26.1535 31.7086 26.1535 31.7086L30.8664 29.3522C31.4571 29.0568 32.1555 29.0721 32.7327 29.393L37.152 31.85C37.7866 32.2029 38.1802 32.8719 38.1802 33.598L38.1802 38.6715C38.1802 41.2552 35.7803 43.1213 33.3322 42.2952C28.3043 40.5987 20.4996 37.3685 15.5528 32.4216C10.6059 27.4748 7.3757 19.6701 5.67916 14.6422C4.85314 12.1941 6.71923 9.79423 9.30287 9.79423L14.3755 9.79423Z" fill="#b3b3b0" stroke="#b3b3b0" stroke-width="2" stroke-linejoin="round"/><path d="M35 6L43 14L35 22" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M27 14.0083H43" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg>
        <svg  style="margin-right:10px;" v-else width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.3755 9.79423C14.1021 9.79423 14.7715 10.1883 15.1241 10.8235L17.5706 15.2303C17.8909 15.8073 17.9059 16.5052 17.6108 17.0955L15.254 21.8092C15.254 21.8092 15.937 25.3206 18.7954 28.179C21.6538 31.0374 25.1535 31.7086 25.1535 31.7086L29.8664 29.3522C30.4571 29.0568 31.1555 29.0721 31.7327 29.393L36.152 31.85C36.7866 32.2029 37.1802 32.8719 37.1802 33.598L37.1802 38.6715C37.1802 41.2552 34.7803 43.1213 32.3322 42.2952C27.3043 40.5987 19.4996 37.3685 14.5528 32.4216C9.60592 27.4748 6.3757 19.6701 4.67916 14.6422C3.85314 12.1941 5.71923 9.79423 8.30287 9.79423L13.3755 9.79423Z" fill="#b3b3b0" stroke="#b3b3b0" stroke-width="2" stroke-linejoin="round"/><path d="M34.2402 6L26.2402 14L34.2402 22" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M42.2402 14.0083H26.2402" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg>
        {{ formateTime(itemData.calltime) }}</div>
        <div class="callInfoB">
          <svg style="margin-right:10px;" width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 20C22.866 20 26 16.866 26 13C26 9.13401 22.866 6 19 6C15.134 6 12 9.13401 12 13C12 16.866 15.134 20 19 20Z" fill="#b3b3b0" stroke="#b3b3b0" stroke-width="2" stroke-linejoin="round"/><path d="M33 31L41 39" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M33 39L41 31" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M27 28H18.8C14.3196 28 12.0794 28 10.3681 28.8719C8.86278 29.6389 7.63893 30.8628 6.87195 32.3681C6 34.0794 6 36.3196 6 40.8V42H27" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg>
          {{$t('wechat.isDel')}}：{{itemData.recover==1?'是':'否'}}</div>
        <div class="callInfoB">
          <svg style="margin-right:10px;" width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.81836 6.72729V14H13.0911" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C16.598 4 10.1351 8.02111 6.67677 13.9981" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M24.005 12L24.0038 24.0088L32.4832 32.4882" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg>
        {{$t('wechat.TalkTime')}}：{{itemData.duration}}秒
        </div>
        <h3 style="margin-top:30px;">{{$t('wechat.Talkrem')}}</h3>
        <div class="callInfoB" v-for="(item,index) in historyCallList" :key="index">
        <!-- <svg style="margin-right:10px;" v-if="itemData.issend!==0" width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.3755 9.79423C15.1021 9.79423 15.7715 10.1883 16.1241 10.8235L18.5706 15.2303C18.8909 15.8073 18.9059 16.5052 18.6108 17.0955L16.254 21.8092C16.254 21.8092 16.937 25.3206 19.7954 28.179C22.6538 31.0374 26.1535 31.7086 26.1535 31.7086L30.8664 29.3522C31.4571 29.0568 32.1555 29.0721 32.7327 29.393L37.152 31.85C37.7866 32.2029 38.1802 32.8719 38.1802 33.598L38.1802 38.6715C38.1802 41.2552 35.7803 43.1213 33.3322 42.2952C28.3043 40.5987 20.4996 37.3685 15.5528 32.4216C10.6059 27.4748 7.3757 19.6701 5.67916 14.6422C4.85314 12.1941 6.71923 9.79423 9.30287 9.79423L14.3755 9.79423Z" fill="#b3b3b0" stroke="#b3b3b0" stroke-width="2" stroke-linejoin="round"/><path d="M35 6L43 14L35 22" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M27 14.0083H43" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg> -->
        <!-- <?xml version="1.0" encoding="UTF-8"?><svg width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.3755 9.79423C14.1021 9.79423 14.7715 10.1883 15.1241 10.8235L17.5706 15.2303C17.8909 15.8073 17.9059 16.5052 17.6108 17.0955L15.254 21.8092C15.254 21.8092 15.937 25.3206 18.7954 28.179C21.6538 31.0374 25.1535 31.7086 25.1535 31.7086L29.8664 29.3522C30.4571 29.0568 31.1555 29.0721 31.7327 29.393L36.152 31.85C36.7866 32.2029 37.1802 32.8719 37.1802 33.598L37.1802 38.6715C37.1802 41.2552 34.7803 43.1213 32.3322 42.2952C27.3043 40.5987 19.4996 37.3685 14.5528 32.4216C9.60592 27.4748 6.3757 19.6701 4.67916 14.6422C3.85314 12.1941 5.71923 9.79423 8.30287 9.79423L13.3755 9.79423Z" fill="none" stroke="#cecece" stroke-width="4" stroke-linejoin="round"/><path d="M34.2402 6L26.2402 14L34.2402 22" stroke="#cecece" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M42.2402 14.0083H26.2402" stroke="#cecece" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg> -->
        <!-- <svg v-if="item.issend !==0" width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.3755 9.79423C15.1021 9.79423 15.7715 10.1883 16.1241 10.8235L18.5706 15.2303C18.8909 15.8073 18.9059 16.5052 18.6108 17.0955L16.254 21.8092C16.254 21.8092 16.937 25.3206 19.7954 28.179C22.6538 31.0374 26.1535 31.7086 26.1535 31.7086L30.8664 29.3522C31.4571 29.0568 32.1555 29.0721 32.7327 29.393L37.152 31.85C37.7866 32.2029 38.1802 32.8719 38.1802 33.598L38.1802 38.6715C38.1802 41.2552 35.7803 43.1213 33.3322 42.2952C28.3043 40.5987 20.4996 37.3685 15.5528 32.4216C10.6059 27.4748 7.3757 19.6701 5.67916 14.6422C4.85314 12.1941 6.71923 9.79423 9.30287 9.79423L14.3755 9.79423Z" fill="#70b3f6" stroke="#70b3f6" stroke-width="2" stroke-linejoin="round"/><path d="M35 6L43 14L35 22" stroke="#70b3f6" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M27 14.0083H43" stroke="#70b3f6" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg> -->
        <!-- <svg style="margin-right:10px;" v-if="itemData.issend!==0" width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.3755 9.79423C15.1021 9.79423 15.7715 10.1883 16.1241 10.8235L18.5706 15.2303C18.8909 15.8073 18.9059 16.5052 18.6108 17.0955L16.254 21.8092C16.254 21.8092 16.937 25.3206 19.7954 28.179C22.6538 31.0374 26.1535 31.7086 26.1535 31.7086L30.8664 29.3522C31.4571 29.0568 32.1555 29.0721 32.7327 29.393L37.152 31.85C37.7866 32.2029 38.1802 32.8719 38.1802 33.598L38.1802 38.6715C38.1802 41.2552 35.7803 43.1213 33.3322 42.2952C28.3043 40.5987 20.4996 37.3685 15.5528 32.4216C10.6059 27.4748 7.3757 19.6701 5.67916 14.6422C4.85314 12.1941 6.71923 9.79423 9.30287 9.79423L14.3755 9.79423Z" fill="#b3b3b0" stroke="#b3b3b0" stroke-width="2" stroke-linejoin="round"/><path d="M35 6L43 14L35 22" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M27 14.0083H43" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg> -->
        <!-- 0 拨打 其它 接听 -->
        <svg style="margin-right:10px;" v-if="itemData.issend==0" width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.3755 9.79423C14.1021 9.79423 14.7715 10.1883 15.1241 10.8235L17.5706 15.2303C17.8909 15.8073 17.9059 16.5052 17.6108 17.0955L15.254 21.8092C15.254 21.8092 15.937 25.3206 18.7954 28.179C21.6538 31.0374 25.1535 31.7086 25.1535 31.7086L29.8664 29.3522C30.4571 29.0568 31.1555 29.0721 31.7327 29.393L36.152 31.85C36.7866 32.2029 37.1802 32.8719 37.1802 33.598L37.1802 38.6715C37.1802 41.2552 34.7803 43.1213 32.3322 42.2952C27.3043 40.5987 19.4996 37.3685 14.5528 32.4216C9.60592 27.4748 6.3757 19.6701 4.67916 14.6422C3.85314 12.1941 5.71923 9.79423 8.30287 9.79423L13.3755 9.79423Z" fill="#b6b6b6" stroke="#b6b6b6" stroke-width="4" stroke-linejoin="round"/><path d="M34.2402 6L26.2402 14L34.2402 22" stroke="#b6b6b6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M42.2402 14.0083H26.2402" stroke="#b6b6b6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <!-- <svg v-else  width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.3755 9.79423C15.1021 9.79423 15.7715 10.1883 16.1241 10.8235L18.5706 15.2303C18.8909 15.8073 18.9059 16.5052 18.6108 17.0955L16.254 21.8092C16.254 21.8092 16.937 25.3206 19.7954 28.179C22.6538 31.0374 26.1535 31.7086 26.1535 31.7086L30.8664 29.3522C31.4571 29.0568 32.1555 29.0721 32.7327 29.393L37.152 31.85C37.7866 32.2029 38.1802 32.8719 38.1802 33.598L38.1802 38.6715C38.1802 41.2552 35.7803 43.1213 33.3322 42.2952C28.3043 40.5987 20.4996 37.3685 15.5528 32.4216C10.6059 27.4748 7.3757 19.6701 5.67916 14.6422C4.85314 12.1941 6.71923 9.79423 9.30287 9.79423L14.3755 9.79423Z" fill="#b3b3b0" stroke="#b3b3b0" stroke-width="2" stroke-linejoin="round"/><path d="M35 6L43 14L35 22" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/><path d="M27 14.0083H43" stroke="#b3b3b0" stroke-width="2" stroke-linecap="square" stroke-linejoin="round"/></svg> -->
        <svg v-else width="20" height="20" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.3755 9.79423C15.1021 9.79423 15.7715 10.1883 16.1241 10.8235L18.5706 15.2303C18.8909 15.8073 18.9059 16.5052 18.6108 17.0955L16.254 21.8092C16.254 21.8092 16.937 25.3206 19.7954 28.179C22.6538 31.0374 26.1535 31.7086 26.1535 31.7086L30.8664 29.3522C31.4571 29.0568 32.1555 29.0721 32.7327 29.393L37.152 31.85C37.7866 32.2029 38.1802 32.8719 38.1802 33.598L38.1802 38.6715C38.1802 41.2552 35.7803 43.1213 33.3322 42.2952C28.3043 40.5987 20.4996 37.3685 15.5528 32.4216C10.6059 27.4748 7.3757 19.6701 5.67916 14.6422C4.85314 12.1941 6.71923 9.79423 9.30287 9.79423L14.3755 9.79423Z" fill="#b6b6b6" stroke="#b6b6b6" stroke-width="4" stroke-linejoin="round"/><path d="M35 6L43 14L35 22" stroke="#b6b6b6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M27 14.0083H43" stroke="#b6b6b6" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <div style="display: flex;justify-content: space-between;width: 100%;margin-left:10px;">
          <div style="margin-right:20px;">{{ formateTime(item.calltime)}}</div><div>{{ item.duration+'秒' }}</div> <div style="float:right;color:red;">{{ item.recover==1?'已删除':'' }}</div>
        </div>
      </div>
    </div>

      <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff"
          :maskClosable="false" title="提示" @ok="handleOk">
          <p>{{$t('wechat.biaojibeizhu')}}</p>
          <p><el-input type="textarea" v-model="remark"></el-input></p> 
      </a-modal>

 <!--打印窗口 -->
 <a-modal width="300px" v-model="showPrint" :getContainer="getRefsAff"
    :maskClosable="false" :title="$t('wechat.dayinyeshu')" @ok="printOk">
    <el-radio-group v-model="formResource">
        <el-radio :label="$t('wechat.allTallk')" style="margin-bottom:10px;font-size:18px;"></el-radio>
        <el-radio :label="$t('wechat.selfTallk')" style="margin-bottom:10px;font-size:18px;"></el-radio>
        <el-radio :label="$t('wechat.jietu')" style="margin-bottom:10px;font-size:18px;"></el-radio>
      </el-radio-group>
  </a-modal>
  </div>
</template>

<script>
import print from 'print-js'
import html2canvas from "html2canvas"
import { getCallRecordsApi,searchWord  } from '@/api/baseInfo/base_api'
import { parseTime } from "@/utils/index"
import { sendMarkOrderApi,getUserCallRe } from '@/api/markApi/index'
import { throttle } from 'lodash';

import ScreenShort from "js-web-screen-shot";

export default {
  name: "callRecords2",
  props:['sendData'],
  data() {
    return {
      closeLoadingData:false,
      scrollTop:0,
      printShow:false,
      printArray:[],
      formResource:'打印所有联系人',
      loadClass:'el-icon-loading',
      loadingText:'正在加载. . .',
      showLoading:false,

      historyCallList:[],
      showInfo:true,
      itemData:'',
      showPrint:false,
      pageIndexValue:'',
      dynamicTags:[],

      showRemark:false,
      remark:'',
      id:'',
      tableData: [
      ],
      searchWord1:'',
      offset: 1,
      limit: 20,
      total: 0,
      sizePage:20,
      callData:'',
      phone1:''
    };
  },
  watch: {
    "$store.state.account.callrecords2": function () {
    if(this.sendData.list_offset){
      this.offset=this.sendData.list_offset;
      this.limit=this.sendData.list_limit;
      
    }else{
      this.offset=1
    }
    this.tableData= []
    if(this.sendData.model == "CallRecords"){
      this.searchWord1 = this.sendData.app_name;
      this.tableData = [];
      this.offset=1;
      this.onSearch();
    }else{
      this.onSearch();
    }
    },
  },
  created(){
    if(this.sendData.list_offset){
      this.offset=this.sendData.list_offset;
      this.limit=this.sendData.list_limit;
    }else{
      this.offset=1
    }
    if(this.sendData.model == "CallRecords"){
      this.searchWord1 = this.sendData.app_name;
      this.tableData = [];
      this.offset=1;
      this.onSearch();

    }else{
      this.onSearch();
    }
  },
  methods:{
    initTableList(){
      let data = {
        proof_num:this.sendData.proof_num,
        casename:this.sendData.casename,
        offset:this.offset,
        limit:this.limit,
        searchKey:this.searchKey
      }
      getTableListApi(data).then(res=>{
        this.tableData = res.data;
        this.total = res.total;
      }).catch(error=>{
        this.tableData = [];
        this.total = 0;
      })
    },
    addPrint(item,event){
      if(event.srcElement.innerHTML == '添加'){
        event.srcElement.innerHTML = '√已添加';
        event.srcElement.style.color = 'red';
        event.srcElement.style.fontWeight = '1000';
        this.printArray.push(item);
      }else{
        event.srcElement.innerHTML = '添加';
        event.srcElement.style.color = '#409EFF';
        event.srcElement.style.fontWeight = '500';
        const index = this.printArray.indexOf(item);
        if (index !== -1) {
          this.printArray.splice(index, 1);
        }
      }
    },
    closePrintFunction(){
      this.storeArray = [];
      this.printShow = false;
    },
    // handleScroll(){
    //   // 获取列表元素
    //   const list = this.$refs.callrem;
    //   // 判断滚动到底部
    //   if (list.scrollTop + list.clientHeight+10 >= list.scrollHeight) {
    //     this.showLoading=true;
    //      
    //     if(this.contantList.length<this.total){
    //       this.loadClass = 'el-icon-loading';
    //       this.loadingText = '正在加载. . .';
    //       this.offset++;
    //       // 加载更多数据
    //       let that = this;
    //       setTimeout(()=>{
    //         that.onSearch();
    //       },1000)
    //     }else{
    //       this.loadClass = 'el-icon-success';
    //       this.loadingText = '到底了，没有更多了！';
    //     }
    //   }
    // },
    // handleOk(){
    //     let data={
    //     navigation_list:sessionStorage.getItem('arr').split(','),
    //     model:this.sendData.model,
    //     isChat:0,
    //     app_name:this.phone1,
    //     account_id:'',
    //     proof_num:this.sendData.proof_num,
    //     list_offset:this.offset,
    //     list_limit:this.limit,
    //     remark:this.remark,
    //     class:this.sendData.class,
    //     label:this.sendData.label,
    //     id:Number(this.id)
    //   }
    //   sendMarkOrderApi(data).then(res=>{
    //     this.showRemark=false;
    //     this.$message({
    //       message: '标记数据成功！',
    //       type: 'success'
    //     });
    //     this.tableData = [];
    //     this.onSearch()
    //   })
    // },
    // // 添加标记点
    // markOrder(item){
      
    //   this.id=item.id;
    //   this.phone1 = item.phone;
    //   this.showRemark=true;
    // },
      // 消息列表滑动加载
      throttleFn: throttle(function() {
        if(this.closeLoadingData){
          return;
        }
      // 获取列表元素
      const list = this.$refs.callrem;
      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight+10 >= list.scrollHeight) {

        this.showLoading=true;
         
        if(this.tableData.length<this.total){
          this.loadClass = 'el-icon-loading';
          this.loadingText = '正在加载. . .';
          let len = this.tableData.length;
          this.offset++;
          // 加载更多数据
            this.onSearch();
        }else{
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
        }
      }
    },1000),
    blackList(){
      this.itemData = '';
      this.showInfo = true;
    },
    openCallDetails(item){
      this.itemData = item;
      let data = {
        proof_num:this.sendData.proof_num,
        phone:item.phone
      }
      getUserCallRe(data).then(res=>{
        this.historyCallList = res.data;
      })
      this.showInfo = false;
    },
    addPageNumber(){
      if(this.pageIndexValue == '')return;
      if(this.dynamicTags.indexOf(this.pageIndexValue)==-1){
        this.dynamicTags.unshift(this.pageIndexValue);
        this.pageIndexValue = '';
        
      }else{
        this.$message({
            message: '第' + this.pageIndexValue + '页码已存在打印队列中！！',
            type: 'warning'
          });
        this.pageIndexValue = '';
      }
    },
    closeTags(tag){
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    openPrintModel(){
      this.dynamicTags = [];
      this.showPrint = true;
    },
    printOk(){
      this.showPrint = false;
      switch (this.formResource) {
        case '打印所有通话记录':
        this.printJson();
          break;
          
        case '手动添加通话记录打印':
          this.scrollTop = this.$refs.callrem.scrollTop;
          this.printArray = [];
          this.printShow = true;
          // this.contantList = this.contantList.sort((a, b) => parseInt(b.msgtime) - parseInt(a.msgtime));
          break;
          
          case '对当前可视区域联系人截图':
            this.jietuFucntion()
            break;
      
        default:
          break;
      }
    },
    jietuFucntion(){
      
      new ScreenShort({
        enableWebRtc: true, // 是否启用webrtc，值为false则使用html2canvas来截图
        loadCrossImg: true, // 跨域
        level: 999999999999999, // 层级
      });
    },
    async printJson() {
      this.closeLoadingData = true;
      let storeArray = this.tableData;

      if(this.formResource == '手动添加通话记录打印'){
        this.tableData = this.printArray;
      }
      const res = await this.tableData;
      let that = this;
      setTimeout(()=>{
        let data = []
      for (let index = 0; index < res.length; index++) {
        const element = res[index];
      
                  data.push({
                    name: element.name,
                    phone: element.phone,
                    calltime:this.formateTime(element.calltime),
                    duration:element.duration,
                    issend:element.issend==1?'接听':'拨打',
                    recover:element.recover==1?'删除':'正常'
                  })
      }
      let focuser = setInterval(() => window.dispatchEvent(new Event('focus')), 500);
      printJS({
        printable: data,
        properties: [
        {
            field: 'name',
            displayName: '联系人姓名',
            columnSize: 1
          },
          {
            field: 'calltime',
            displayName: '时间',
            columnSize: 1
          },
          {
            field: 'phone',
            displayName: '手机号',
            columnSize: 1
          },
          {
            field: 'duration',
            displayName: '通话时间(秒)',
            columnSize: 1
          },
          {
            field: 'recover',
            displayName: '状态',
            columnSize: 1
          },
          {
            field: 'issend',
            displayName: '接听/拨打',
            columnSize: 1
          },
        ],
        type: 'json',
        header: '通讯录',
        documentTitle:'-',
        headerStyle:'font-size:18px;',
        // 样式设置
        gridStyle: 'border: 1px solid #000;text-algin:center;',
        gridHeaderStyle: 'color:#000;  border: 1px solid #000;',
        onPrintDialogClose: () => {
          clearInterval(focuser);
          that.tableData = storeArray;
          that.printShow = false;
          this.closeLoadingData = false;
          that.$nextTick(() => {
            that.$refs.callrem.scrollTop=that.scrollTop;
              })
        }
      })
      },1000)
    },    
    getPrintJsonStr(){
      let list = []

      for (let index = 0; index < this.dynamicTags.length; index++) {
        const element = this.dynamicTags[index];

        let data={
            proof_num: this.sendData.proof_num,
            searchkey:this.searchWord1,
            model:this.sendData.model,
            offset: Number(element),
            limit: this.limit,
        }
        searchWord(data,'/search/callrecord').then(res=>{
              let item = {
                pageIndex:element,
                list:res.data
              }
              list.push(item);
        })
        
      }
      return list;

    },

    getRefsAff(){
      return  this.$refs.callBosMain;
    },
    handleOk(){
        let data={
        navigation_list:sessionStorage.getItem('arr').split(','),
        model:this.sendData.model,
        isChat:0,
        app_name:this.phone1,
        account_id:'',
        proof_num:this.sendData.proof_num,
        list_offset:this.offset,
        list_limit:this.limit,
        remark:this.remark,
        class:this.sendData.class,
        label:this.sendData.label,
        id:Number(this.id)
      }
      sendMarkOrderApi(data).then(res=>{
        this.showRemark=false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.tableData = [];
        this.onSearch()
      })
    },
    // 添加标记点
    markOrder(item){
      this.phone1 = item.phone;
      this.id=item.id;
      this.showRemark=true;
    },
    handleEdit(){
      
    },
    onSearchFirst(){
      this.tableData = [];
      this.offset=1;
      this.onSearch()
    },
    onSearch(){
      if(sessionStorage.getItem('searchAll')!==null){
        this.searchWord1 = sessionStorage.getItem('searchAll');
      }
      let data={
          proof_num: this.sendData.proof_num,
          searchkey:this.searchWord1,
          model:'callrecords',
          offset: this.offset,
          limit: this.limit,
      }
      searchWord(data,'/callRecordsNew').then(res=>{
        if(res.data.length == 0){
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
          return
        }
        for (let index = 0; index < res.data.length; index++) {
          const element = res.data[index];
          this.tableData.push(element)
        }
        // this.tableData=res.data
        this.total=res.data[0].cnt
        if(this.sendData.app_name){
          for (let index = 0; index < this.tableData.length; index++) {
            const element = this.tableData[index];
            if(element.phone == this.sendData.app_name){
              this.$nextTick(() => {
                this.$refs.callrem.scrollTop = (index)*60
              })
            }
          }
        }
      })
    },
    // 格式化时间
    formateTime(date){
     return parseTime(date)
    },
    //打印
    printPdf(){
      html2canvas(document.getElementById('printCallRecords')).then(function(canvas) {
        var imgageData = canvas.toDataURL("image/png");//把canvas转为base64图片
        print(imgageData, 'image');
      });
    },
    handleSizeChange(val) {
      this.limit=val
      this.onSearch()
    },
    handleCurrentChange(val) {
      this.offset=val
      this.onSearch()
    },
  }
};
</script>

<style scoped>
.height{
  border: 1px solid red;
  height: 100px;
  width: 100%;

}

.loadingBoxbottom{
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.callInfoB{
  height: 40px;
  width: 90%;
  border-bottom: 1px solid #f1f1f1;
  line-height: 40px;
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.blackCall{
  height: 30px;
  display: flex;
  align-items: center;
  border-bottom:1px solid #e5e5e5;
  cursor: pointer;
  margin-bottom: 10px;
}
.callRecordListItem{
  height: 60px;
  border-bottom: 1px solid #e5e5e5;
  padding: 0 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 17px 119px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  position: relative;
  background: #fff;
}
/* .callRecordListItem:hover{
  background: #ececec;
} */
.badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
}
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}
.mainContentBox {
  padding: 0 10px;
  height: 90%;
  overflow-y: auto;
  padding-bottom:100px;
}
.mainContentBox::-webkit-scrollbar {
  width: 10px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.mainContentBox::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.mainContentBox::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}


@media (min-width: 2360px) and (max-width: 2560px) {
  .mainContentBox {
    width: 500px;
  padding: 0 10px;
  height: 90%;
  overflow-y: auto;
  padding-bottom:100px;
}
}

/* 当屏幕宽度大于2560时 */
@media screen and (min-width: 2561px) {
  .mainContentBox {
    width: 500px;
  padding: 0 10px;
  height: 90%;
  overflow-y: auto;
  padding-bottom:100px;
}
}
</style>
